import React, { Component } from 'react'
import {Route,NavLink,Switch,Redirect,useRoutes} from 'react-router-dom'
import routes from './routers'
import './App.css'
import About from './pages/About'
import Home from './pages/Home'
export default function App()  {
  const element=useRoutes(routes)
  return (
    <div>
      <h1>React-Router</h1>
      <div className='container'>
        <div className='left'>
          {/* <a href="./index.html">首页</a>
          <a href="./about.html">关于</a> */}
            {/* <Link to='/index'>首页</Link>
            <Link to='/about'>关于</Link> */}
            <NavLink activeClassName='demo' to='/home'>首页</NavLink>
            <NavLink activeClassName='demo' to='/about'>关于</NavLink>
        </div>
        <div className="right">
          {/* Switch匹配到后就不往下匹配了，提升效率 exact精准匹配 */}
          {/* <Switch>
            <Route  path="/home" component={Home}></Route>
            <Route  path="/about" component={About}></Route>
            <Redirect to='/about'></Redirect>
          </Switch> */}
          {/* react-router-dom v6新写法 */}
          {element}
        </div>
      </div>
    </div>
  )
}
